<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>总结vue监视数据</title>
</head>

<body>
    <!-- 
        总结
            vue监视数据的原理
                1.vue会监视data中所有层次的数据
                2.如果监测对象中的数据
                    通过setter实现数据监视 且要在new vue时就传入要监测的数据
                        1.对象后追加的属性，vue默认不做响应式处理
                        2.如需要给对象后追加属性作响应式 请使用如下API
                            Vue.set(targett, propertyName.name/index, value)
                            vm.$set(targett, propertyName.name/index, value)
                3.如何监视数组中的数据
                    通过包裹数组更新数组元素的方法实现，本质就是做啦两件事
                        1.调用原生的方法对数组进行更新
                        2.跟新解析模板，进而更新页面
                4.vue修改数组某个元素时，一定要用如下方法
                    1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
                    2. Vue.set() 或 vm.$set()
                特别注意：Vue.set() 和 vm.$set()   不能给vm 或vm跟数据的对象 添加属性。
     -->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button>
        <button @click="addsex">添加性别属性，默认值为男</button>
        <button @click="updatesex">修改性别</button>
        <button @click="addfriend">在列表首位添加以为朋友</button>
        <button @click="updatefristfridenname">修改第一位朋友名字</button>
        <button @click="addhobby">添加一 个爱好</button>
        <button @click="updatefirsthobby">修改第一个爱好为开车</button>
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好</h3>
        <lu>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </lu>
        <h3>朋友信息</h3>
        <lu>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}----{{f.age}}
            </li>
        </lu>
    </div>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                student: {

                    name: 'tom',
                    age: 20,
                    hobby: [
                        '喝酒', '烫头'
                    ],
                    friends: [{
                        name: '张三',
                        age: '20'
                    }, {
                        name: '李四',
                        age: '20'
                    }]

                }
            },
            methods: {
                addsex() {
                    Vue.set(this.student, 'sex', "男")
                        // vm.$set(this.student, 'sex', '女')
                },
                updatesex() {
                    this.student.sex = '未知'
                },
                addfriend() {
                    this.student.friends.unshift({
                        name: '王献之',
                        age: '20'
                    })
                },
                updatefristfridenname() {
                    this.student.friends[0].name = "王仙之"
                    this.student.friends[0].age = 60
                },
                addhobby() {
                    this.student.hobby.push('抽烟')
                },
                updatefirsthobby() {
                    this.student.hobby.splice(0, 1, '开车')
                }
            },
        })
    </script>
</body>

</html>